<!--
 * @Author: zhangyang
 * @Date: 2024-01-12 16:57:08
 * @LastEditTime: 2024-01-12 17:08:57
 * @Description:
-->
<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const props = defineProps<{
  href: string
}>()

const isActive = ref(false)

onMounted(() => {
  const currentPath = location ? location.pathname : ''
  isActive.value = currentPath === props.href
})
</script>

<template>
  <a :href="href" v-bind="$attrs" :class="{ active: isActive }">
    <slot />
  </a>
</template>

<style>
a {
  display: inline-block;
  text-decoration: none;
}

a.active {
  /* font-weight: bolder; */
  @apply text-blue-400;
  text-decoration: none;
}
</style>
